<template>

<!--  <el-row>-->
<!--    <el-col :span="8">-->
<!--      <div class="grid-content bg-purple">-->

<!--        <el-button type="warning" @click="dialogVisible = true">收房合同查询</el-button>-->

<!--        <el-dialog-->
<!--          title="收房合同查询"-->
<!--          :visible.sync="dialogVisible"-->
<!--          width="50%"-->
<!--          :before-close="handleClose">-->
<!--            <span>-->

<!--    <el-table-->
<!--      :data="tableData"-->
<!--      style="width: 100%">-->
<!--         <el-table-column label="业主名称" align="center" prop="ownerName"/>-->
<!--         <el-table-column label="房产信息" align="center" prop="houseName"/>-->
<!--         <el-table-column label="签约日期" align="center" prop="createTime"/>-->
<!--         <el-table-column label="操作">-->
<!--         <template slot-scope="scope">-->
<!--           <el-tag type="danger" @click="selectedid(scope.row)">选中</el-tag>-->
<!--         </template>-->
<!--       </el-table-column>-->
<!--     </el-table>-->

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"/></span></el-dialog>-->
<!--      </div>-->
<!--    </el-col>-->
<!--  </el-row>-->


<el-main>

  <el-button type="text" @click="dialogVisible = true">收房合同查询</el-button>

  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>
      <el-table
        :data="tableData"
        style="width: 100%">
                 <el-table-column label="业主名称" align="center" prop="ownerName"/>
                 <el-table-column label="房产信息" align="center" prop="houseName"/>
                 <el-table-column label="签约日期" align="center" prop="createTime"/>
                 <el-table-column label="操作">
                 <template slot-scope="scope">
                   <el-tag type="danger" @click="selectedid(scope.row)">选中</el-tag>
                 </template>
               </el-table-column>
             </el-table>

    </span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>



  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="收房合同编号" prop="sfContractNo">
            <el-input v-model="form.sfContractNo" placeholder="请输入收房合同编号"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="房产信息" prop="houseName">
            <el-input v-model="form.houseName" placeholder="请输入房产信息"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="业主姓名" prop="ownerName">
            <el-input v-model="form.ownerName" placeholder="业主姓名"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form-item label="业主手机号" prop="ownerMobile">
            <el-input v-model="form.ownerMobile" placeholder="请输入业主手机号"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="业主身份证号" prop="ownerIdCard">
            <el-input v-model="form.ownerIdCard" placeholder="请输业主身份证号"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form-item label="银行卡号" prop="bankCard">
            <el-input v-model="form.bankCard" placeholder="请输入银行卡号"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="银行名称" prop="bankName">
            <el-input v-model="form.bankName" placeholder="请输入银行名称"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form-item label="开户行" prop="bankOpen">
            <el-input v-model="form.bankOpen" placeholder="请输入开户行"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <hr>


    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="金融产品选择">
            <el-select v-model="form.paymentType" placeholder="请选择金融产品">
              <el-option v-for="type in productList" :label="type.jrProductName" :value="type.id" :key="type.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form-item label="年利率" prop="bankOpen">
            <el-input v-model="form.bankOpen" placeholder="请输入开户行"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <el-form-item label="借款期限" prop="bankName">-->
<!--            <el-input v-model="form.bankName" placeholder="请输入银行名称"/>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div>-->
<!--          <el-form-item label="年一次性服务费率" prop="bankOpen">-->
<!--            <el-input v-model="form.bankOpen" placeholder="请输入开户行"/>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <el-form-item label="借款金额" prop="bankName">-->
<!--            <el-input v-model="form.bankName" placeholder="请输入银行名称"/>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div>-->
<!--          <el-form-item label="授信额度" prop="bankOpen">-->
<!--            <el-input v-model="form.bankOpen" placeholder="请输入开户行"/>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->


  </el-form>


</el-main>

</template>

<script>
import {sfList,getProduct} from "../../../api/finance/product";
export default {
  name: "addsf",
  components: {
  },
  data(){
    return{
      tableData:[],
      dialogVisible: true,
      form:{},
      rules: {

        sfContractNo: [
          {required: true, message: '请输入业主姓名', trigger: 'blur'},
        ],
        houseName: [
          {required: true, message: '请输入签约人(甲方)', trigger: 'blur'},
        ],
        ownerName: [
          {required: true, message: '请输入业主联系地址', trigger: 'blur'},
        ],

        ownerMobile: [
          {required: true, message: '请输入业主手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '手机号长度11位', trigger: 'blur'}
        ],
        ownerIdCard: [
          {required: true, message: '请输入业主证件号码', trigger: 'blur'},
          {min: 18, max: 18, message: '证件号码18位', trigger: 'blur'}
        ],
        bankCard: [
          {required: true, message: '请输入签约人证件号码', trigger: 'blur'},
          {min: 18, max: 18, message: '证件号码18位', trigger: 'blur'}
        ],
        bankName: [
          {required: true, message: '请输入紧急手机号码', trigger: 'blur'},
        ],
        bankOpen: [
          {required: true, message: '请输入业主姓名', trigger: 'blur'},
        ],

      },
      productList:[],

    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },

    selectedid(row) {
      this.form.sfContractNo = row.sfContractNo
      this.form.houseName = row.houseName
      this.form.ownerName = row.ownerName
      this.form.ownerMobile = row.ownerMobile
      this.form.ownerIdCard = row.ownerIdCard
      this.form.bankCard = row.bankCard
      this.form.bankName = row.bankName
      this.form.bankOpen = row.bankOpen
      this.dialogVisible = false;
    },

    sfList(){
      sfList(this.queryParams).then(response=>{
        console.log(response.data);
        this.tableData=response.data;
      })
    },
    getProduct(){
      getProduct().then(response=>{
        this.productList=response.data;
        console.log( this.productList)
      })
    }

  },
  created() {
    this.sfList();
    this.productList();

  },



}
</script>

